<template>
    <div class="btns">
        <button @click="trendLengthMeasure">目标测距</button>
        <button @click="lengthMeasure">静态测距</button>
        <button @click="areaMeasure">测面积</button>
    </div>
</template>

<script>
    import {Vector as VectorSource} from "ol/source";
    import {Vector as VectorLayer} from "ol/layer";
    import {Overlay, Feature} from 'ol';
    import {LineString, Point} from 'ol/geom';
    import {Style, Stroke, Fill, Circle as CircleStyle} from "ol/style";

    import Measure from './measure.js'
    import {formatLength, setToolStyle} from './formatMeasure.js'

    export default {
        name: "MeasureTool",
        props: ["map"],//地图组件传值
        data() {
            return {
                isLengthMeasuring: false,
                isAreaMeasuring: false,
                isTrendLengthMeasuring: false,
                spaceVisible: false,
                visible: false,
                pointLayerArr: [],
            }
        },
        methods: {
            // 地图加载完闭之后调用
            init() {
                this.singleclick()
                this.map.on('dblclick', (evt) => {
                    console.log(' init-dblclick: ', evt)
                    this.isLengthMeasuring = false
                    this.isAreaMeasuring = false
                    this.isTrendLengthMeasuring = false
                })
            },
            // 静态测距
            lengthMeasure() {
                // 如果点击了测距并没有在地图上测量而是直接点击了测面，会发现测距和测面同时进行，这个函数就是用来解决这个问题
                Measure.clearDraw(this.map)
                this.isLengthMeasuring = true
                this.isTrendLengthMeasuring = false
                this.isAreaMeasuring = false
                this.spaceVisible = false
                this.visible = false
                this.clearTrendMeasure()
                Measure.measure(this.map, 'LineString', () => {
                    this.isLengthMeasuring = false
                })
            },
            // 测面积
            areaMeasure() {
                Measure.clearDraw(this.map)
                this.isAreaMeasuring = true
                this.isTrendLengthMeasuring = false
                this.isLengthMeasuring = false
                this.visible = false
                this.spaceVisible = false
                this.clearTrendMeasure()
                Measure.measure(this.map, 'Polygon', () => {
                    this.isAreaMeasuring = false
                })
            },
            // 目标测距
            trendLengthMeasure() {
                Measure.clearDraw(this.map)
                // 如果需要在点击目标（动态）测距的时候清除静态测距和测面就调用这个函数
                Measure.deleteAllLayers(this.map)
                this.isTrendLengthMeasuring = true
                this.isAreaMeasuring = false
                this.isLengthMeasuring = false
                this.visible = false
                this.spaceVisible = false
                this.clearTrendMeasure()
            },
            // 清空动态测距图层
            clearTrendMeasure() {
                this.clickCount = 0
                this.doublePointArr = []
                if (this.lineLayer) this.map.removeLayer(this.lineLayer)
                this.pointLayerArr.forEach(n => {
                    this.map.removeLayer(n)
                })
                this.map.overlays_.array_.forEach(n => {
                    if (n.values_.element?.className && n.values_.element.className === 'ol-tooltip ol-tooltip-measure') {
                        this.map.removeOverlay(n)
                    }
                })
            },
            singleclick() {
                this.doublePointArr = []
                this.map.on('singleclick', (evt) => {
                    const {flightInfo, clickNum} = this
                    if (this.clickCount < 3 && this.isTrendLengthMeasuring) {
                        this.clickCount++
                        // 选择的是否为动态的无人机
                        // const isClickAir = evt.originalEvent.path[0].className.indexOf('air-marker') !== -1
                        const isClickAir = false
                        // 最多点击两次选点并且点击记了选点测距按钮
                        if (isClickAir) {
                            const {longitude, latitude} = flightInfo.find(val => {
                                return val.flightNum === clickNum
                            })
                            this.doublePointArr.push({
                                type: '1',
                                flightNum: clickNum,
                                point: Measure.fromLonLat([longitude, latitude])
                            }) // 其中type为'0'则为静态的点，type为'1'则为动态的点
                        } else {
                            const point = new Point(evt.coordinate)
                            const tempLayer = new VectorLayer({
                                source: new VectorSource({
                                    features: [
                                        new Feature({
                                            geometry: point
                                        })
                                    ]
                                }),
                                style: new Style({
                                    fill: new Fill({
                                        color: 'rgba(27, 78, 150, 0.4)'
                                    }),
                                    stroke: new Stroke({
                                        color: '#1A90FF',
                                        // lineDash: [10, 10],
                                        width: 2
                                    }),
                                    image: new CircleStyle({
                                        radius: 5,
                                        stroke: new Stroke({
                                            color: '#1A90FF'
                                        }),
                                        fill: new Fill({
                                            color: '#fff'
                                        })
                                    })
                                }),
                                updateWhileAnimating: true
                            })
                            this.pointLayerArr.push(tempLayer)
                            this.map.addLayer(tempLayer)
                            this.doublePointArr.push({type: '0', point: evt.coordinate})
                        }
                        this.dealPoint()
                    }
                    if (this.clickCount >= 2) {
                        this.isTrendLengthMeasuring = false
                    }
                })
            },
            dealPoint() {
                if (this.doublePointArr.length === 2) {
                    if (this.lineLayer) this.map.removeLayer(this.lineLayer)
                    const tempPointLine = [this.doublePointArr[0].point, this.doublePointArr[1].point]
                    const linestring = new LineString(tempPointLine)
                    this.lineLayer = new VectorLayer({
                        // 两点之间的连线
                        source: new VectorSource({
                            features: [
                                new Feature({
                                    geometry: linestring
                                })
                            ]
                        }),
                        style: new Style({
                            fill: new Fill({
                                color: 'rgba(27, 78, 150, 0.4)'
                            }),
                            stroke: new Stroke({
                                color: '#1A90FF',
                                // lineDash: [10, 10],
                                width: 2
                            }),
                            image: new CircleStyle({
                                radius: 5,
                                stroke: new Stroke({
                                    color: '#1A90FF'
                                }),
                                fill: new Fill({
                                    color: '#fff'
                                })
                            })
                        }),
                        updateWhileAnimating: true
                    })
                    this.map.addLayer(this.lineLayer)
                    const tempLineString = new LineString(tempPointLine)
                    const long = (this.doublePointArr[0].point[0] + this.doublePointArr[1].point[0]) / 2
                    const lat = (this.doublePointArr[0].point[1] + this.doublePointArr[1].point[1]) / 2
                    this.createMeasureTooltip([long, lat], tempLineString)
                }
            },
            createMeasureTooltip(coordinate, tempLineString) {
                let {measureTooltipElement} = this
                if (measureTooltipElement) {
                    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
                }
                this.map.overlays_.array_.forEach(n => {
                    if (n.values_.element?.className && n.values_.element.className === 'ol-tooltip ol-tooltip-measure') {
                        this.map.removeOverlay(n)
                    }
                })
                measureTooltipElement = document.createElement('div')
                measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
                measureTooltipElement.innerHTML = formatLength(this.map, tempLineString)
                setToolStyle(measureTooltipElement)
                const measureTooltip = new Overlay({
                    element: measureTooltipElement,
                    offset: [0, -15],
                    positioning: 'bottom-center',
                    measure: true
                })
                measureTooltip.setPosition(coordinate)
                this.map.addOverlay(measureTooltip)
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>
    .btns {
        /*position: absolute;*/
        top: 0px;
        left: 0px;
    }
</style>